import React, { useState } from 'react';
import HotspotTabs from './HotspotTabs';
import './MarketingHotspot.css';

const festivals = [
  { name: '大暑', date: '2025-07-22', tip: '今天' },
  { name: '星朝环双', date: '2025-07-31', tip: '9天后' },
  { name: '建军节', date: '2025-08-01', tip: '10天后' },
  { name: '立秋', date: '2025-08-07', tip: '16天后' },
  { name: '处暑', date: '2025-08-23', tip: '32天后' },
  { name: '七夕节', date: '2025-08-29', tip: '38天后' },
];

const festivalImages = [
  [
    { url: 'https://js.ibaotu.com/act/25/06/19/6853746cc2803.jpg', title: '夏日泳池H5', type: '大暑H5', count: 133 },
    { url: '/hots/major-heat-2.jpg', title: '狂暑季电商模板', type: '电商模板', count: 364 },
    { url: '/hots/major-heat-3.jpg', title: '旅游综合海报', type: '海报', count: 850 },
    { url: '/hots/major-heat-4.jpg', title: '暑期旅游视频模板', type: '视频模板', count: 74 },
    { url: '/hots/major-heat-5.jpg', title: '校园教育PPT', type: 'PPT', count: 85 },
  ],
  [
    { url: '/hots/major-heat-1.jpg', title: '夏日泳池H5', type: '大暑H5', count: 133 },
    { url: '/hots/major-heat-2.jpg', title: '狂暑季电商模板', type: '电商模板', count: 364 },
    { url: '/hots/major-heat-3.jpg', title: '旅游综合海报', type: '海报', count: 850 },
    { url: '/hots/major-heat-4.jpg', title: '暑期旅游视频模板', type: '视频模板', count: 74 },
    { url: '/hots/major-heat-5.jpg', title: '校园教育PPT', type: 'PPT', count: 85 },
  ],
  [
    // 建军节图片
    { url: '/hots/major-heat-1.jpg', title: '夏日泳池H5', type: '大暑H5', count: 133 },
    { url: '/hots/major-heat-2.jpg', title: '狂暑季电商模板', type: '电商模板', count: 364 },
    { url: '/hots/major-heat-3.jpg', title: '旅游综合海报', type: '海报', count: 850 },
    { url: '/hots/major-heat-4.jpg', title: '暑期旅游视频模板', type: '视频模板', count: 74 },
    { url: '/hots/major-heat-5.jpg', title: '校园教育PPT', type: 'PPT', count: 85 },
  ],
  [
    // 立秋图片
    { url: '/hots/major-heat-1.jpg', title: '夏日泳池H5', type: '大暑H5', count: 133 },
    { url: '/hots/major-heat-2.jpg', title: '狂暑季电商模板', type: '电商模板', count: 364 },
    { url: '/hots/major-heat-3.jpg', title: '旅游综合海报', type: '海报', count: 850 },
    { url: '/hots/major-heat-4.jpg', title: '暑期旅游视频模板', type: '视频模板', count: 74 },
    { url: '/hots/major-heat-5.jpg', title: '校园教育PPT', type: 'PPT', count: 85 },
  ],
  [
    // 处暑图片
    { url: '/hots/major-heat-1.jpg', title: '夏日泳池H5', type: '大暑H5', count: 133 },
    { url: '/hots/major-heat-2.jpg', title: '狂暑季电商模板', type: '电商模板', count: 364 },
    { url: '/hots/major-heat-3.jpg', title: '旅游综合海报', type: '海报', count: 850 },
    { url: '/hots/major-heat-4.jpg', title: '暑期旅游视频模板', type: '视频模板', count: 74 },
    { url: '/hots/major-heat-5.jpg', title: '校园教育PPT', type: 'PPT', count: 85 },
  ],
  [
    // 七夕节图片
    { url: '/hots/major-heat-1.jpg', title: '夏日泳池H5', type: '大暑H5', count: 133 },
    { url: '/hots/major-heat-2.jpg', title: '狂暑季电商模板', type: '电商模板', count: 364 },
    { url: '/hots/major-heat-3.jpg', title: '旅游综合海报', type: '海报', count: 850 },
    { url: '/hots/major-heat-4.jpg', title: '暑期旅游视频模板', type: '视频模板', count: 74 },
    { url: '/hots/major-heat-5.jpg', title: '校园教育PPT', type: 'PPT', count: 85 },
  ],
];

const MarketingHotspot: React.FC = () => {
  const [activeIdx, setActiveIdx] = useState(0);

  return (
    <div className="marketing-hotspot">
      <HotspotTabs festivals={festivals} activeIdx={activeIdx} setActiveIdx={setActiveIdx} />
      <div className="hotspot-images">
        {festivalImages[activeIdx] && festivalImages[activeIdx].map((img, i) => (
          <div className="hotspot-img-card" key={i}>
            <img src={img.url} alt={img.title} />
            <div className="img-title">{img.title}</div>
            <div className="img-meta">
              <span>{img.type}</span>
              <span>共{img.count}个作品</span>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default MarketingHotspot;
